<template>
  <div class="no-found">
    <div class="no-found-text">
      {{text}}
    </div>
    <div class="no-found-ps" v-if="message">
      {{message}}
    </div>
    <div class="no-found-btn">
      <span @click="backToFirst">返回首页</span>
    </div>
  </div>
</template>

<script>
export default {
  // data() {
  //   return {
  //   }
  // },
  props: {
    text: {
      type: String,
      default: '404'
    }
  },
  // created() {
  //   console.log(this.$route)
  // },
  computed: {
    message() {
      return this.$route.params.text ? this.$route.params.text : ''
    }
  },
  methods: {
    backToFirst() {
      this.$router.replace('/')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.no-found {
  background:#f0f2f5;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  // justify-content: center;
  &-text {
    opacity: 0;
    margin-top: 100px;
    margin-bottom: 20px;
    font-size: 72px;
    animation-name: slideUp;
    animation-duration: 0.6s;
    animation-fill-mode: forwards;
  }
  &-ps {
    opacity: 0;
    margin-bottom: 30px;
    animation-name: slideUp;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
  }
  &-btn {
    opacity: 0;
    animation-name: slideUp;
    animation-duration: 0.5s;
    animation-delay: 0.2s;
    animation-fill-mode: forwards;
    span {
      padding: 8px 20px;
      border-radius: 10px;
      color: #fff;
      background-color: #1482f0;
      cursor: pointer;
    }
  }
  @keyframes slideUp {
    0% {
      transform: translateY(60px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
}
</style>
